<template>
  <Dialog :title="t('doubleChioce.index.bindMentor')" v-model="dialogVisible" width="1400">
    <vxe-table
      ref="tableRef"
      v-loading="loading"
      :data="list"
      stripe
      :row-config="{ keyField: 'id' }"
      :checkbox-config="{ reserve: true }"
      :column-config="{ resizable: true }"
      :size="vxeTableSize"
    >
      <vxe-column type="seq" width="50" align="center" />
      <vxe-column
        :title="t('systemUser.fields.nickname')"
        field="nickname"
        align="center"
        show-header-overflow
        show-overflow
        min-width="60"
      />
      <vxe-column
        :title="t('systemUser.fields.mobile')"
        field="mobile"
        align="center"
        show-header-overflow
        show-overflow
        min-width="95"
      />
      <vxe-column
        :title="t('systemUser.fields.deptName')"
        field="deptName"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      />
      <vxe-column
        :title="t('systemUser.fields.zcm')"
        field="zcm"
        align="center"
        show-header-overflow
        show-overflow
        min-width="70"
      />
      <vxe-column
        :title="t('systemUser.fields.workingStatus')"
        field="workingStatus"
        align="center"
        show-header-overflow
        show-overflow
        min-width="60"
      >
        <template #default="scope">
          <dict-tag
            v-if="scope.row.workingStatus"
            :type="DICT_TYPE.WORKING_STATUS"
            :value="scope.row.workingStatus"
          />
        </template>
      </vxe-column>
      <vxe-column
        :title="t('batchMentor.fields.quotaRemaining')"
        align="center"
        show-header-overflow
        show-overflow
        min-width="90"
      >
        <template #default="scope">
          <el-tooltip class="box-item" effect="dark" placement="left">
            <template #content>
              <p>{{ t('batchMentor.fields.quota1Remaining') }}: {{ scope.row.quota1Remaining }}</p>
              <p>{{ t('batchMentor.fields.quota2Remaining') }}: {{ scope.row.quota2Remaining }}</p>
              <p>{{ t('batchMentor.fields.quota3Remaining') }}: {{ scope.row.quota3Remaining }}</p>
              <p>{{ t('batchMentor.fields.quota4Remaining') }}: {{ scope.row.quota4Remaining }}</p>
              <p>{{ t('batchMentor.fields.quota5Remaining') }}: {{ scope.row.quota5Remaining }}</p>
            </template>
            {{ scope.row.quota1Remaining }}/{{ scope.row.quota2Remaining }}/{{
              scope.row.quota3Remaining
            }}/{{ scope.row.quota4Remaining }}/{{ scope.row.quota5Remaining }}
          </el-tooltip>
        </template>
      </vxe-column>
      <vxe-column
        :title="t('common.operate')"
        field="operator"
        align="center"
        fixed="right"
        width="80"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            :disabled="
              scope.row.quota1Remaining === 0 &&
              scope.row.quota2Remaining === 0 &&
              scope.row.quota3Remaining === 0 &&
              scope.row.quota4Remaining === 0 &&
              (!currentStudent?.is985 || scope.row.quota5Remaining === 0)
            "
            @click="handleSelectMentor(scope.row)"
          >
            {{ t('doubleChioce.index.chooseBtn') }}
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
      layout="total, prev, pager, next"
    />

    <Dialog
      :title="t('doubleChioce.index.chooseTitle')"
      v-model="dialogVisible2"
      width="400"
      :fullscreen="false"
    >
      <el-select
        v-model="useQuota"
        :placeholder="t('common.selectTextPlaceholder') + t('batchMentor.fields.quota')"
        style="width: 100%"
        v-loading="formLoading"
      >
        <el-option value="保障性指标" :disabled="currentRow?.quota1Remaining === 0">
          <span style="float: left">{{ t('batchMentor.fields.quota1') }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            {{ t('doubleChioce.index.remaining', { x: currentRow.quota1Remaining }) }}
          </span>
        </el-option>
        <el-option value="竞争性指标" :disabled="currentRow?.quota2Remaining === 0">
          <span style="float: left">{{ t('batchMentor.fields.quota2') }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            {{ t('doubleChioce.index.remaining', { x: currentRow.quota2Remaining }) }}
          </span>
        </el-option>
        <el-option value="奖励性指标" :disabled="currentRow?.quota3Remaining === 0">
          <span style="float: left">{{ t('batchMentor.fields.quota3') }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            {{ t('doubleChioce.index.remaining', { x: currentRow.quota3Remaining }) }}
          </span>
        </el-option>
        <el-option value="博士指标" :disabled="currentRow?.quota4Remaining === 0">
          <span style="float: left">{{ t('batchMentor.fields.quota4') }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            {{ t('doubleChioce.index.remaining', { x: currentRow.quota4Remaining }) }}
          </span>
        </el-option>
        <el-option
          value="优秀学生奖励指标"
          :disabled="!currentStudent?.is985 || currentRow?.quota5Remaining === 0"
        >
          <span style="float: left">{{ t('batchMentor.fields.quota5') }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            {{ t('doubleChioce.index.remaining', { x: currentRow.quota5Remaining }) }}
          </span>
        </el-option>
      </el-select>
      <template #footer>
        <el-button @click="handleSubmit" type="primary" :disabled="formLoading"
          >{{ t('common.ok') }}
        </el-button>
        <el-button @click="dialogVisible2 = false">{{ t('common.cancel') }}</el-button>
      </template>
    </Dialog>
  </Dialog>
</template>

<script setup lang="ts">
/** 双选绑定导师 */
import { BatchMentorApi, BatchMentorSelectedRespVO } from '@/api/recruit/batchmentor'
import { useAppStore } from '@/store/modules/app'
import { DoubleChioceApi } from '@/api/recruit/doublechioce'
import { RecruitStudentChoiceListRespVO } from '@/api/recruit/recruitstudent'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'DoubleChoiceBindMentor' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false)

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const loading = ref(false)
const list = ref<BatchMentorSelectedRespVO[]>([])
const total = ref(0)
const currentStudent = ref<RecruitStudentChoiceListRespVO>()
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  batchId: currentStudent.value?.batchId
})

const dialogVisible2 = ref(false)
const currentRow = ref<BatchMentorSelectedRespVO>()
const useQuota = ref('')
const handleSelectMentor = async (row: BatchMentorSelectedRespVO) => {
  currentRow.value = row
  useQuota.value = ''
  dialogVisible2.value = true
}

const handleSubmit = async () => {
  if (!useQuota.value) {
    message.error(t('common.selectTextPlaceholder') + t('batchMentor.fields.quota'))
    return
  }
  try {
    await message.confirm(t('doubleChioce.index.confirmTips1'))
  } catch {
    return
  }
  try {
    formLoading.value = true
    await DoubleChioceApi.bindDoubleChioce({
      batchId: currentStudent.value!.batchId,
      recruitStudentId: currentStudent.value!.id,
      studentId: currentStudent.value!.accountId,
      mentorId: currentRow.value!.userId,
      useQuota: useQuota.value,
      starter: '直接绑定',
      studentStatus: '是',
      mentorStatus: '是'
    })
  } finally {
    formLoading.value = false
  }

  dialogVisible2.value = false
  dialogVisible.value = false
  emit('success')
  message.success(t('common.operSuccess'))
}

const getList = async () => {
  queryParams.batchId = currentStudent.value!.batchId
  loading.value = true
  try {
    const data = await BatchMentorApi.getSelectedMentorByBatchId(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const open = (student: RecruitStudentChoiceListRespVO) => {
  list.value = []
  total.value = 0
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  currentStudent.value = student
  dialogVisible.value = true
  getList()
}

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
